<template>
  <div class="pie_content">
    <div class="pie_main">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">资源储备-人员</div>
        <a @click="goRouter('/MemberLedger')" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
      </div>
      <div class="pie_box" style="width:100%;height:88%">
        <ReservePersonnel chartsId="pie"></ReservePersonnel>
      </div>
    </div>
    <div class="pie_main">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">资源储备-队伍</div>
        <a @click="goRouter('/TeamLedger')" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
      </div>
      <div class="pie_box" style="width:100%;height:88%">
        <ReserveTeam chartsId="pie1"></ReserveTeam>
      </div>
    </div>
    <div class="pie_main">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">资源储备-车辆</div>
        <a @click="goRouter('/VehiclesLedger')" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
      </div>
      <div class="pie_box"  style="width:100%;height:88%">
        <ReserveCar chartsId="pie2"></ReserveCar>
      </div>
    </div>
    <div class="pie_main">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">资源储备-装备</div>
        <a @click="goRouter('/EquipManagement')" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
      </div>
      <div class="pie_box" style="width:100%;height:88%">
        <ReserveZb chartsId="pie3"></ReserveZb>
      </div>
    </div>
    <div class="pie_main">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">资源储备-物资</div>
        <a @click="goRouter('/MaterialManagement')" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
      </div>
      <div class="pie_box" style="width:100%;height:88%">
        <ReserveWz chartsId="pie4"></ReserveWz>
      </div>
    </div>
  </div>
</template>

<script>
import ReservePersonnel from "./ReservePersonnel";
import ReserveTeam from "./ReserveTeam.vue";
import ReserveCar from "./ReserveCar.vue";
import ReserveZb from "./ReserveZb.vue";
import ReserveWz from "./ReserveWz.vue";
export default {
  components: { ReservePersonnel, ReserveTeam, ReserveCar, ReserveZb, ReserveWz },
  data() {
    return {
      pieChartData: [
        {
          name: "输电",
          y: 1872,
          color: "#ffeaa0"
        },
        {
          name: "变电",
          y: 1949,
          color: "#e085a0"
        },
        {
          name: "配电",
          y: 6520,
          color: "#5998ff"
        },
        {
          name: "其他",
          y: 133,
          color: "#f49d77"
        }
      ],
      pieChartData1: [
        {
          name: "输电",
          y: 97,
          color: "#ffeaa0"
        },
        {
          name: "变电",
          y: 142,
          color: "#e085a0"
        },
        {
          name: "配电",
          y: 688,
          color: "#5998ff"
        },
        {
          name: "其他",
          y: 158,
          color: "#f49d77"
        }
      ],
      pieChartData2: [
        {
          name: "带电作业车",
          y: 390,
          color: "#5998ff"
        },
        {
          name: "吊车",
          y: 307,
          color: "#f49d77"
        },
        {
          name: "电源车",
          y: 297,
          color: "#ffeaa0"
        },
        {
          name: "抢修车",
          y: 1079,
          color: "#e085a0"
        }
      ],
      pieChartData3: [
        {
          name: "泛光灯",
          y: 1132,
          color: "#5998ff"
        },
        {
          name: "发电机",
          y: 748,
          color: "#f49d77"
        },
        {
          name: "探照灯",
          y: 1253,
          color: "#ffeaa0"
        },
        {
          name: "发电车",
          y: 436,
          color: "#e085a0"
        }
      ],
      pieChartData4: [
        {
          name: "开关",
          y: 1132,
          color: "#5998ff"
        },
        {
          name: "杆塔",
          y: 3607,
          color: "#f49d77"
        },
        {
          name: "导线",
          y: 2183,
          color: "#ffeaa0"
        },
        {
          name: "配变",
          y: 1306,
          color: "#e085a0"
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    // this.chart1 = this.$echarts.init(document.getElementById("pie"));
    // this.chart2 = this.$echarts.init(document.getElementById("pie1"));
    // this.chart3 = this.$echarts.init(document.getElementById("pie2"));
    // this.chart4 = this.$echarts.init(document.getElementById("pie3"));
    // this.chart5 = this.$echarts.init(document.getElementById("pie4"));
    // this.initCharts();
  },
  methods: {
    initCharts() {
      //  获取数据
      // this.$Highcharts.chart("pie", {
      //   chart: {
      //     type: "pie",
      //     backgroundColor: "rgba(0,0,0,0)",
      //     options3d: {
      //       enabled: true,
      //       alpha: 45,
      //       beta: 0
      //     }
      //   },
      //   credits: {
      //     enabled: false// 隐藏右下角水印
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     backgroundColor: "rgba(0,24,34,0.25)",
      //     borderWidth: 0,
      //     shadow: false,
      //     textStyle: {
      //       color: "#fff"
      //     },
      //     shared: true,
      //     formatter() {
      //       return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
      //     }
      //   },
      //   legend: {
      //     enabled: false
      //   },
      //   plotOptions: {
      //     pie: {
      //       allowPointSelect: false,
      //       cursor: "pointer",
      //       depth: 40,
      //       size: 190,
      //       dataLabels: {
      //         crop: false,
      //         alignTo: "connectors",
      //         connectorWidth: 0,
      //         connectorShape: "crookedLine",
      //         overflow: "allow",
      //         distance: 0,
      //         enabled: false,
      //         style: {
      //           fontSize: "14px"
      //         },
      //         formatter() {
      //           return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
      //         }
      //       },
      //       showInLegend: true, // 显示图例
      //       states: {
      //         inactive: {
      //           opacity: 1
      //         }
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       size: "150%",
      //       innerSize: "70%",
      //       type: "pie",
      //       startAngle: -20, // 起始角度
      //       states: {
      //         inactive: {
      //           enabled: true
      //         }
      //       },
      //       data: this.pieChartData
      //     }
      //   ],
      //   subtitle: {
      //     floating: true,
      //     text: `<span style="font-size: 28px;font-weight:bold;color:#fff">10474</span><br/><span style="font-size: 16px;color:#fff">人员储备</span>`,
      //     x: 0,
      //     y: 80
      //   },
      //   title: {
      //     text: "",
      //     style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
      //     y: 40
      //   },
      //   colors: ["#148AF3", "#F59066", "#FDDD67"]
      // });
      // this.$Highcharts.chart("pie1", {
      //   chart: {
      //     type: "pie",
      //     backgroundColor: "rgba(0,0,0,0)",
      //     options3d: {
      //       enabled: true,
      //       alpha: 45,
      //       beta: 0
      //     }
      //   },
      //   credits: {
      //     enabled: false// 隐藏右下角水印
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     backgroundColor: "rgba(0,24,34,0.25)",
      //     borderWidth: 0,
      //     shadow: false,
      //     textStyle: {
      //       color: "#fff"
      //     },
      //     shared: true,
      //     formatter() {
      //       return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
      //     }
      //   },
      //   legend: {
      //     enabled: false
      //   },
      //   plotOptions: {
      //     pie: {
      //       allowPointSelect: false,
      //       cursor: "pointer",
      //       depth: 40,
      //       size: 190,
      //       dataLabels: {
      //         crop: false,
      //         alignTo: "connectors",
      //         connectorWidth: 0,
      //         connectorShape: "crookedLine",
      //         overflow: "allow",
      //         distance: 0,
      //         enabled: false,
      //         style: {
      //           fontSize: "14px"
      //         },
      //         formatter() {
      //           return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
      //         }
      //       },
      //       showInLegend: true, // 显示图例
      //       states: {
      //         inactive: {
      //           opacity: 1
      //         }
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       size: "150%",
      //       innerSize: "70%",
      //       type: "pie",
      //       startAngle: -20, // 起始角度
      //       states: {
      //         inactive: {
      //           enabled: true
      //         }
      //       },
      //       data: this.pieChartData1
      //     }
      //   ],
      //   subtitle: {
      //     floating: true,
      //     text: `<span style="font-size: 28px;font-weight:bold;color:#fff">1085</span><br/><span style="font-size: 16px;color:#fff">队伍储备</span>`,
      //     x: 0,
      //     y: 80
      //   },
      //   title: {
      //     text: "",
      //     style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
      //     y: 40
      //   },
      //   colors: ["#148AF3", "#F59066", "#FDDD67"]
      // });
      // this.$Highcharts.chart("pie2", {
      //   chart: {
      //     type: "pie",
      //     backgroundColor: "rgba(0,0,0,0)",
      //     options3d: {
      //       enabled: true,
      //       alpha: 45,
      //       beta: 0
      //     }
      //   },
      //   credits: {
      //     enabled: false// 隐藏右下角水印
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     backgroundColor: "rgba(0,24,34,0.25)",
      //     borderWidth: 0,
      //     shadow: false,
      //     textStyle: {
      //       color: "#fff"
      //     },
      //     shared: true,
      //     formatter() {
      //       return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
      //     }
      //   },
      //   legend: {
      //     enabled: false
      //   },
      //   plotOptions: {
      //     pie: {
      //       allowPointSelect: false,
      //       cursor: "pointer",
      //       depth: 40,
      //       size: 190,
      //       dataLabels: {
      //         crop: false,
      //         alignTo: "connectors",
      //         connectorWidth: 0,
      //         connectorShape: "crookedLine",
      //         overflow: "allow",
      //         distance: 0,
      //         enabled: false,
      //         style: {
      //           fontSize: "14px"
      //         },
      //         formatter() {
      //           return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
      //         }
      //       },
      //       showInLegend: true, // 显示图例
      //       states: {
      //         inactive: {
      //           opacity: 1
      //         }
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       size: "150%",
      //       innerSize: "70%",
      //       type: "pie",
      //       startAngle: -20, // 起始角度
      //       states: {
      //         inactive: {
      //           enabled: true
      //         }
      //       },
      //       data: this.pieChartData2
      //     }
      //   ],
      //   subtitle: {
      //     floating: true,
      //     text: `<span style="font-size: 28px;font-weight:bold;color:#fff">2073</span><br/><span style="font-size: 16px;color:#fff">车辆储备</span>`,
      //     x: 0,
      //     y: 80
      //   },
      //   title: {
      //     text: "",
      //     style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
      //     y: 40
      //   },
      //   colors: ["#148AF3", "#F59066", "#FDDD67"]
      // });
      this.$Highcharts.chart("pie3", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
          }
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 40,
            size: 190,
            dataLabels: {
              crop: false,
              alignTo: "connectors",
              connectorWidth: 0,
              connectorShape: "crookedLine",
              overflow: "allow",
              distance: 0,
              enabled: false,
              style: {
                fontSize: "14px"
              },
              formatter() {
                return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
              }
            },
            showInLegend: true, // 显示图例
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            size: "150%",
            innerSize: "70%",
            type: "pie",
            startAngle: -20, // 起始角度
            states: {
              inactive: {
                enabled: true
              }
            },
            data: this.pieChartData3
          }
        ],
        subtitle: {
          floating: true,
          text: `<span style="font-size: 28px;font-weight:bold;color:#fff">3569</span><br/><span style="font-size: 16px;color:#fff">装备储备</span>`,
          x: 0,
          y: 80
        },
        title: {
          text: "",
          style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
          y: 40
        },
        colors: ["#148AF3", "#F59066", "#FDDD67"]
      });
      this.$Highcharts.chart("pie4", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
          }
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 40,
            size: 190,
            dataLabels: {
              crop: false,
              alignTo: "connectors",
              connectorWidth: 0,
              connectorShape: "crookedLine",
              overflow: "allow",
              distance: 0,
              enabled: false,
              style: {
                fontSize: "14px"
              },
              formatter() {
                return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
              }
            },
            showInLegend: true, // 显示图例
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            size: "150%",
            innerSize: "70%",
            type: "pie",
            startAngle: -20, // 起始角度
            states: {
              inactive: {
                enabled: true
              }
            },
            data: this.pieChartData4
          }
        ],
        subtitle: {
          floating: true,
          text: `<span style="font-size: 28px;font-weight:bold;color:#fff">8228</span><br/><span style="font-size: 16px;color:#fff">物资储备</span>`,
          x: 0,
          y: 80
        },
        title: {
          text: "",
          style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
          y: 40
        },
        colors: ["#148AF3", "#F59066", "#FDDD67"]
      });
    },
    goRouter(val) {
      this.$router.push({path: `${val}`});
    }

  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.pie_content{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pie_main{
    width: 19%;
    height: 100%;
    border: 1px solid #0649d7;
    .pie_box{
      width: 100%;
      height: 60%;
    }
    .pie_legend{
      width: 100%;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
      margin-top: 20px;
      .legend{
        width: 40%;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        line-height: 24px;
        .icon{
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }
        .name{
          // width: px;
          margin: 0 10px;
          color: #fff;
        }
      }
    }
  }
}
</style>
